<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>菜单配置</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="addShow" class="animated fadeInRight">
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="NewAdd" v-show="resourceMap.saveResource">新增</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete" @click="onSelectDel" v-show="resourceMap.deleteResource">删除选中</el-button>
    </div>
    <br>
    <el-table :data="tableData" border :max-height="windowHeight" size="small" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="categoryName" label="菜单名称"> </el-table-column>
      <el-table-column prop="categoryUrl" label="路径"></el-table-column>x
      <el-table-column label="是否有子项" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.hasChild">有</span>
          <span v-else>没有</span>
        </template>
      </el-table-column>
      <el-table-column prop="from" sortable label="归类"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" v-show="resourceMap.updateResource">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- dialog NewAdd -->
    <el-dialog title="用户权限" :visible.sync="dialogNewAdd">
      <el-form :model="menuConfig">
        <el-row>
          <el-col :xs="24" :sm="10" :lg="10">
            <el-form-item label="菜单名称" label-width="100px">
              <el-input v-model="menuConfig.categoryName" clearable size="small" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :lg="10">
              <el-form-item label="菜单标识" label-width="100px">
                <el-input v-model="menuConfig.category" clearable size="small" ></el-input>
              </el-form-item>
            </el-col>
          <el-col :xs="24" :sm="10" :lg="10">
            <el-form-item label="url路径" label-width="100px">
              <el-input v-model="menuConfig.categoryUrl" clearable size="small" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :lg="10">
            <el-form-item label="归类" label-width="100px">
              <el-input v-model="menuConfig.from" clearable size="small" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否显示子项" :label-width="formLabelWidth">
          <el-switch
            v-model="menuConfig.hasChild"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="菜单功能配置" :label-width="formLabelWidth" v-if="menuConfig.hasChild">
          <el-row v-for="item in menuConfig.children" :key="item.id">
            <el-col :span="8">
              <el-input v-model="item.title" clearable size="small" placeholder="功能名称"></el-input>
            </el-col>
            <el-col :span="8" :offset="1">
              <el-input v-model="item.url" clearable size="small" placeholder="接口路径"></el-input>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-button size="small"  @click.prevent="removeItem(item)">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <el-button type="primary" size="small" @click="addItem" v-if="menuConfig.hasChild">新增功能</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewAdd = false" size="small">取 消</el-button>
        <el-button type="primary" @click="newAddSubmit" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          addShow:false,
          resourceMap:storageLocal.getName('resource'),
          tableData: [],
          dialogNewAdd: false,
          formLabelWidth: '120px',
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 110,
          multipleSelection:[],
          menuConfig: {},
          arryDelete:[],//被删除的子项
          arryDelList:[],//删除选中的单元
          flag:0//0-新增，1-编辑
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.addShow = true
      },
      methods: {
          NewAdd:function(){//新增
            this.menuConfig = {hasChild:false,children:[{title: '',url:''}]}
            this.flag = 0
            this.dialogNewAdd = true
          },
          onSubmit:function() {//查询提交
            this.currentPage = 1;
            this.requestModel()
          },
          handleSelectionChange:function(val){
            var arr =[];
            _.each(val,function(item){
              arr = arr.concat(item.idList)
            });
            this.multipleSelection = val;
            this.arryDelList = arr;
          },
          newAddSubmit:function(){//新增用户,更新用户 -- 提交
            var data = {
              isActive:"",
              from:this.menuConfig.from,
              categoryName:this.menuConfig.categoryName,
              category:this.menuConfig.category?this.menuConfig.category:"",
              categoryUrl:this.menuConfig.categoryUrl,
              hasChild:this.menuConfig.hasChild,
              children:this.menuConfig.children,
              deleteId:this.arryDelete
            }
            console.log(data)
            if(this.flag){//更新
              resourceRequst("/resource/updateResource",data,function(res){
                  vm.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  vm.dialogNewAdd = false;
                  vm.requestModel()
              })
            }else{//新增
              resourceRequst("/resource/saveResource",data,function(res){
                  vm.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  vm.dialogNewAdd = false;
                  vm.requestModel()
              })
            }
          },
          onSelectDel:function() {//删除操作
            if(this.multipleSelection.length == 0){
              this.$message({ showClose: true, message: '提示，还未选中对象', type: 'warning', duration:1500 });
              return
            }
            this.$alert('此操作将删除选中数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:true,
              type: 'warning',
              callback: function(action){
                if (action == "confirm") {
                  var data = {allKeys:vm.arryDelList}
                  resourceRequst("/resource/deleteResource",data,function(res){
                    vm.$message({ type: 'success', message: "删除成功！" });
                    vm.requestModel()
                  })
                }
              }
            });
          },
          handleEdit:function(index, row) {//编辑
            this.menuConfig =JSON.parse(JSON.stringify(row));
            this.arryDelete = [];
            this.flag = 1;
            this.dialogNewAdd = true;
          },
          removeItem:function(item) {//删除功能子项
            var index = this.menuConfig.children.indexOf(item)
            if (index !== -1) {
              this.menuConfig.children.splice(index, 1)
              if(item.id != undefined){
                this.arryDelete.push(item.id)
              }
            }
          },
          addItem:function() {
            this.menuConfig.children.push({
              title: '',
              url:''
            });
          },
          requestModel:function(){
            resourceRequst("/resource/queryResource",{},function(res){
                vm.tableData = res.getResult
            })
          }
      }
    })
  </script>
</html>